import dayjs from "dayjs";
import { message } from "@/utils/message";
import { handleTree } from "@/utils/tree";

// import { getUserList } from "@/api/system";
import { ElMessageBox } from "element-plus";
import { type PaginationProps } from "@pureadmin/table";
import { reactive, ref, computed, onMounted } from "vue";

export function organizaHook() {
  const form = reactive({
    username: "",
    mobile: "",
    status: ""
  });
  const dataList = ref([]);
  const treeData = ref([]);
  const loading = ref(true);
  const switchLoadMap = ref({});
  const jobsList = ref([]);

  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  const columns: TableColumnList = [
    {
      type: "selection",
      width: 55,
      align: "left",
      hide: ({ checkList }) => !checkList.includes("勾选列")
    },
    {
      label: "序号",
      type: "index",
      minWidth: 70,
      hide: ({ checkList }) => !checkList.includes("序号列")
    },
    {
      label: "组织名称",
      prop: "name",
      width: 280,
      align: "left"
    },
    {
      label: "组织编码",
      prop: "sort"
      // width: 150
    },
    {
      label: "上级组织编码",
      prop: "sort"
      // width: 150
    },
    {
      label: "创建时间",
      width: 200,
      prop: "createTime",
      formatter: ({ createTime }) =>
        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
    },

    {
      label: "操作",
      fixed: "right",
      // width: 160,
      slot: "operation"
    }
  ];
  const jobsColumns: TableColumnList = [
    {
      type: "selection",
      align: "left"
    },
    {
      label: "岗位名称",
      prop: "jobName",
      align: "left",
      width: 120
    },
    {
      label: "岗位编码",
      prop: "jobCode",
      align: "left",
      width: 100
    },
    {
      label: "操作",
      fixed: "right",
      // width: 160,
      slot: "operation"
    }
  ];
  const buttonClass = computed(() => {
    return [
      "!h-[20px]",
      "reset-margin",
      "!text-gray-500",
      "dark:!text-white",
      "dark:hover:!text-primary"
    ];
  });

  function onChange({ row, index }) {
    ElMessageBox.confirm(
      `确认要<strong>${
        row.status === 0 ? "停用" : "启用"
      }</strong><strong style='color:var(--el-color-primary)'>${
        row.username
      }</strong>用户吗?`,
      "系统提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        dangerouslyUseHTMLString: true,
        draggable: true
      }
    )
      .then(() => {
        switchLoadMap.value[index] = Object.assign(
          {},
          switchLoadMap.value[index],
          {
            loading: true
          }
        );
        setTimeout(() => {
          switchLoadMap.value[index] = Object.assign(
            {},
            switchLoadMap.value[index],
            {
              loading: false
            }
          );
          message("已成功修改用户状态", {
            type: "success"
          });
        }, 300);
      })
      .catch(() => {
        row.status === 0 ? (row.status = 1) : (row.status = 0);
      });
  }

  function handleUpdate(row) {
    console.log(row);
  }

  function handleDelete(row) {
    console.log(row);
  }

  function handleSizeChange(val: number) {
    console.log(`${val} items per page`);
  }

  function handleCurrentChange(val: number) {
    console.log(`current page: ${val}`);
  }

  function handleSelectionChange(val) {
    console.log("handleSelectionChange", val);
  }

  function queryTreeData() {
    const data: any[] = [
      {
        name: "中储南京智慧物流有限公司",
        type: 1,
        parentId: 0,
        sort: 0,
        leaderUserId: 1,
        phone: "15888888888",
        email: "ry@qq.com",
        status: 0,
        id: 100,
        createTime: 1609837427000,
        remark: "备注、备注、备注、备注、备注、备注、备注"
      },
      {
        name: "工会",
        type: 2,
        parentId: 100,
        sort: 1,
        leaderUserId: 104,
        phone: "15888888888",
        email: "ry@qq.com",
        status: 0,
        id: 101,
        createTime: 1609837427000,
        remark: "备注、备注、备注、备注、备注、备注、备注"
      },
      {
        name: "研发部门",
        type: 3,
        parentId: 101,
        sort: 1,
        leaderUserId: 104,
        phone: "15888888888",
        email: "ry@qq.com",
        status: 0,
        id: 103,
        createTime: 1609837427000,
        remark: "备注、备注、备注、备注、备注、备注、备注"
      },
      {
        name: "市场部门",
        type: 3,
        parentId: 102,
        sort: 1,
        leaderUserId: null,
        phone: "15888888888",
        email: "ry@qq.com",
        status: 0,
        id: 108,
        createTime: 1609837427000,
        remark: "备注、备注、备注、备注、备注、备注、备注"
      },
      {
        name: "财务中心",
        type: 2,
        parentId: 100,
        sort: 2,
        leaderUserId: null,
        phone: "15888888888",
        email: "ry@qq.com",
        status: 0,
        id: 102,
        createTime: 1609837427000,
        remark: "备注、备注、备注、备注、备注、备注、备注"
      },
      {
        name: "市场部门",
        type: 3,
        parentId: 101,
        sort: 2,
        leaderUserId: null,
        phone: "15888888888",
        email: "ry@qq.com",
        status: 1,
        id: 104,
        createTime: 1609837427000,
        remark: "备注、备注、备注、备注、备注、备注、备注"
      },
      {
        name: "财务部门",
        type: 3,
        parentId: 102,
        sort: 2,
        leaderUserId: null,
        phone: "15888888888",
        email: "ry@qq.com",
        status: 0,
        id: 109,
        createTime: 1609837427000,
        remark: "备注、备注、备注、备注、备注、备注、备注"
      },
      {
        name: "测试部门",
        type: 3,
        parentId: 101,
        sort: 3,
        leaderUserId: null,
        phone: "15888888888",
        email: "ry@qq.com",
        status: 0,
        id: 105,
        createTime: 1609837427000,
        remark: "备注、备注、备注、备注、备注、备注、备注"
      },
      {
        name: "财务部门",
        type: 3,
        parentId: 101,
        sort: 4,
        leaderUserId: 103,
        phone: "15888888888",
        email: "ry@qq.com",
        status: 1,
        id: 106,
        createTime: 1609837427000,
        remark: "备注、备注、备注、备注、备注、备注、备注"
      },
      {
        name: "运维部门",
        type: 3,
        parentId: 101,
        sort: 5,
        leaderUserId: null,
        phone: "15888888888",
        email: "ry@qq.com",
        status: 0,
        id: 107,
        createTime: 1609837427000,
        remark: "备注、备注、备注、备注、备注、备注、备注"
      },
      {
        name: "金湖分公司",
        type: 1,
        parentId: 1,
        sort: 0,
        leaderUserId: 1,
        phone: "15888888888",
        email: "ry@qq.com",
        status: 0,
        id: 200,
        createTime: 1609837427000,
        remark: "备注、备注、备注、备注、备注、备注、备注"
      },
      {
        name: "徐州分公司",
        type: 1,
        parentId: 2,
        sort: 0,
        leaderUserId: 1,
        phone: "15888888888",
        email: "ry@qq.com",
        status: 0,
        id: 300,
        createTime: 1609837427000,
        remark: "备注、备注、备注、备注、备注、备注、备注"
      }
    ];
    treeData.value = handleTree(data);
    console.log(treeData.value);
  }

  async function onSearch() {
    loading.value = true;
    // const { data } = await getUserList();
    const data = {
      list: [
        {
          username: "admin",
          nickname: "admin",
          remark: "管理员",
          deptId: 103,
          postIds: [1],
          mobile: "15888888888",
          sex: 0,
          id: 1,
          status: 0,
          createTime: 1609837427000,
          dept: { id: 103, name: "研发部门" }
        },
        {
          username: "pure",
          nickname: "pure",
          remark: "不要吓我",
          deptId: 104,
          postIds: [1],
          mobile: "15888888888",
          sex: 0,
          id: 100,
          status: 1,
          createTime: 1609981637000,
          dept: { id: 104, name: "市场部门" }
        },
        {
          username: "小姐姐",
          nickname: "girl",
          remark: null,
          deptId: 106,
          postIds: null,
          mobile: "15888888888",
          sex: 1,
          id: 103,
          status: 1,
          createTime: 1610553035000,
          dept: { id: 106, name: "财务部门" }
        },
        {
          username: "小哥哥",
          nickname: "boy",
          remark: null,
          deptId: 107,
          postIds: [],
          mobile: "15888888888",
          sex: 0,
          id: 104,
          status: 0,
          createTime: 1611166433000,
          dept: { id: 107, name: "运维部门" }
        }
      ],
      total: 4
    };
    dataList.value = data.list;
    pagination.total = data.total;
    queryTreeData();
    queryJobsList();
    setTimeout(() => {
      loading.value = false;
    }, 500);
  }

  function queryJobsList() {
    jobsList.value = [
      {
        jobName: "产品经理",
        jobCode: "0001",
        id: 1
      },
      {
        jobName: "高级产品经理",
        jobCode: "0002",
        id: 2
      },
      {
        jobName: "产品经理主管",
        jobCode: "0003",
        id: 3
      }
    ];
  }

  const resetForm = formEl => {
    if (!formEl) return;
    formEl.resetFields();
    onSearch();
  };

  onMounted(() => {
    onSearch();
    queryJobsList();
  });

  return {
    form,
    loading,
    jobsColumns,
    columns,
    dataList,
    pagination,
    buttonClass,
    treeData,
    jobsList,
    onSearch,
    resetForm,
    handleUpdate,
    handleDelete,
    handleSizeChange,
    handleCurrentChange,
    handleSelectionChange
  };
}
